<template>
	<view>
		<zero-loading type="circle" v-if="loading"></zero-loading>
		<view class="title "></view>
		<!-- <view class="grid col-2 ">
			<view class="split padding-left-lg">
				<view class="tab-alarm padding-sm shadow" hover-class="opcity"
					hover-stay-time="150">
					<view class="flex  align-center ">
						<view class="flex-sub text-center">
							<i class="cuIcon-wifi  text-gray"></i>
							<text class="padding-left-xs text-md text-gray">告警</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="padding-right-lg">
				<view class="tab-notice padding-sm shadow" hover-class="opcity"
					hover-stay-time="150">
					<view class="flex  align-center ">
						<view class="flex-sub text-center">
							<i class="cuIcon-wifi  text-gray"></i>
							<text class="padding-left-xs text-md text-gray">告警</text>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="cu-bar solid-bottom ">
			<view class="action">
				<text class="cuIcon-titles text-olive"></text><text class="text-gray text-sm">{{title}}</text>
			</view>
			<view class="action">
				<view class="">
					<button @tap="onTabAlarmType('')" :class="alarm_type==''?'':'line-grey'"
						class="cu-btn bg-white shadow sm margin-right-xxs">全部</button>
					<button @tap="onTabAlarmType('alarm')" :class="alarm_type=='alarm'?'':'line-grey'"
						class="cu-btn bg-red  shadow sm margin-right-xxs">告警</button>
					<button @tap="onTabAlarmType('notice')" :class="alarm_type=='notice'?'':'line-grey'"
						class="cu-btn bg-orange  shadow sm">通知</button>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" class="scroll-Y" :style='{ height: scrollHeight }' @scrolltoupper=""
			@scrolltolower="">
			<view class="cu-timeline">
				<block v-for="(item, idx) in alarms" :key="idx">
					<view  :class="item.level>0?'text-red cuIcon-warnfill':'text-grey cuIcon-noticefill'" class="cu-item cur  " 
					hover-class="opcity" hover-stay-time="150">
						<view :class="item.level>0?'bg-alarm':'bg-notice'" class=" content shadow">
					
							<view class="  text-white">
							
								<view class="flex justify-center padding-bottom-xs">
									<view class="flex-sub">
										<view class="fl text-xs text-white text-left">时间:</view>
									</view>
									<view class="flex-twice">
										<view class="fr text-xs text-white">
											{{item.add_time}}
										</view>
									</view>
								</view>
							
								<view class="flex justify-center padding-bottom-xs">
									<view class="flex-sub">
										<view class="fl text-xs text-white text-left">单元:</view>
									</view>
									<view class="flex-twice">
										<view class="fr text-xs text-white">
											{{item.housename}} 
										</view>
									</view>
								</view>
								
								<view v-if="item.device_type == 'DMXFGW_NODE' " class="flex justify-center ">
									<view class="flex-sub">
										<view class="fl text-xs text-white text-left">栏位号</view>
									</view>
									<view class="flex-twice">
										<view class="fr text-xs text-white">
											{{item.remark}}
										</view>
									</view>
								</view>
							
								<!-- <view class="flex justify-center padding-bottom-xs">
									<view class="flex-sub">
										<view class="fl text-xs text-white text-left">级别:</view>
									</view>
									<view class="flex-twice">
										<view class="fr text-xs text-white">
											{{item.level}}
										</view>
									</view>
								</view> -->
							
								<view class="flex justify-center ">
									<view class="flex-sub">
										<view class="fl text-xs text-white text-left">内容:</view>
									</view>
									<view class="flex-twice">
										<view class="fr text-xs text-white">
											{{item.alarm_content}}
										</view>
									</view>
								</view>
								
								<view v-if="item.device_type == 'DMXFGW' || item.device_type == 'DMXFGW_NODE'" class="flex justify-center ">
									<view class="flex-sub">
										<view class="fl text-xs text-white text-left">饲喂网关SN</view>
									</view>
									<view class="flex-twice">
										<view class="fr text-xs text-white">
											{{item.device_addr}}
										</view>
									</view>
								</view>
								
								<view v-if="item.device_type == 'DMXFGW_NODE' " class="flex justify-center ">
									<view class="flex-sub">
										<view class="fl text-xs text-white text-left">饲喂器SN</view>
									</view>
									<view class="flex-twice">
										<view class="fr text-xs text-white">
											{{item.sn}}
										</view>
									</view>
								</view>
								
								
							
							</view>
						</view>
					</view>
				</block>

			</view>
		</scroll-view>

	</view>
</template>

<script>
	import * as api from 'common/api.js';
	import {
		API_HEAD
	} from '../../common/api';
	export default {
		data() {
			return {
				scrollHeight: 0,
				loading:false,
				farmid: '',
				farmname: '',
				housename:'',
				houseid:'',

				title: '',

				alarms: [],

				alarm_type: ''
			}
		},
		onReady() {
			// 计算scroll-view高度
			uni.getSystemInfo({
				success: resu => {
					//console.info("窗口高度:", resu.windowHeight)
					const query = uni.createSelectorQuery()
					query.select('.title').boundingClientRect()
					query.exec(res => {

						//console.info("顶部下拉区域:", res[0])
						this.scrollHeight = resu.windowHeight - res[0].height - 10 - 50 + 'px';
						//console.log('剩余高度', this.scrollHeight);
					})
				}
			})
		},
		onShow: function() {
			console.info("show alarm")
			uni.setNavigationBarTitle({
				title: '告警通知'
			});
		},
		onLoad(option) {
			console.info("load alarm", option)
			if (option.farmname) {
				this.farmname = option.farmname
			}
			if (option.farmid) {
				this.farmid = option.farmid
			}
			if (option.housename) {
				this.housename = option.housename
			}
			if (option.houseid) {
				this.houseid = option.houseid
			}
			this.title = this.farmname
			
			this.loadAlarmList()
		},
		methods: {
			onTabAlarmType(val) {
				this.alarm_type = val
				console.info(this.alarm_type)
				this.loadAlarmList()
			},
			loadAlarmList() {
				var that = this
				var token = getApp().getToken()
				
				var level = '';
				if(that.alarm_type==''){
					level = ''
				}else if(that.alarm_type=='alarm'){
					level = '1'
				}else if(that.alarm_type=='notice'){
					level = '0'
				}
				
				that.loading = true
				api.myRequest({
					url: '/Api/Alarm/NowPage',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						page:1,
						limit:100,
						farmid: that.farmid,
						houseid: that.houseid,
						status:1,
						level:level,
					},
				}, false).then(res => {
					that.loading = false
					if (res.code >= 0) {
						console.info(res)
						var alarms = res.data;
						that.alarms = alarms
						
					} else {
				
					}
				}).catch(err => {
					that.loading = false
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.tab-alarm {
		/* min-height: 180rpx; */
		background-color: rgba(255, 96, 48, 0.3);
		height: 40px;
		border-radius: 20px 00% 0% 20px;
		/* border: 1px solid #e54d42; */
	}

	.tab-notice {
		/* min-height: 180rpx; */
		background-color: rgba(255, 96, 48, 0.3);
		height: 40px;
		border-radius: 0px 20px 20px 0px;
		/* border: 1px solid #e54d42; */
	}

	.opcity {
		opacity: 0.6;
	}

	.split {
		border-right: 1px solid #aaaaaa;
	}

	.bg-alarm {
		background-color: rgba(236, 0, 0, 0.7);
		border: 1px solid #e54d42;
	}

	.bg-notice {
		background-color: rgba(125, 125, 125, 0.6);
		border: 1px solid #ffffff;
	}

	.cu-timeline {
		display: block;
		background-color: transparent !important;
	}

	.cu-timeline>.cu-item::before {
		background-color: transparent !important;
	}
	
	
</style>